<template>
	<view class="activity">
		<top-header :PageName="pageName" is-show-back />
		<image class="img"
			src="https://julimeng-prod.oss-cn-hangzhou.aliyuncs.com/managehub/MP/activity/activity.png" />
		<view class="main">
			<view class="container">
				<view class="links">
					<view class="link" @click="goProfit">我的收益</view>
					<view class="link" @click="goRule">活动规则</view>
				</view>
				<view v-if="activityList && activityList.length" class="box list">
					<template v-for="item in activityList">
						<!-- #ifdef MP-WEIXIN -->
						<button :key="item.id" v-if="item.type !== 'query'" plain class="item"
							:open-type="item.type === 'brokerage' ? 'share' : ''"
							@click="$event => handleActivity(item)">
							<image :src="item.posterUrls ? item.posterUrls[0] : ''" />
						</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<button :key="item.id" v-if="item.type !== 'query'" plain class="item"
							:open-type="item.type === 'brokerage' ? 'share' : ''"
							@click="$event => handleActivity(item)">
							<image :src="item.posterUrls ? item.posterUrls[0] : ''" />
						</button>
						<!-- #endif -->
					</template>
				</view>
				<view v-if="rankList && rankList.length" class="box rank">
					<view class="box-title">提现记录排行榜</view>
					<view v-for="item in rankList" :key="item.id" class="item">
						<text>{{ item.phone }}</text>
						<text>已提现</text>
						<text>{{ item.fPrice }}元</text>
					</view>
				</view>
			</view>
		</view>
		<share-another v-if="isShareShow" ref="another" @close="isShareShow = false"></share-another>
	</view>
</template>

<script>
	import {
		redBase64Bg
	} from '../../pagesWater/taxSearch/base64'
	import shareAnother from '@/pagesWater/taxSearch/components/shareAnother.vue'
	import topHeader from '@/components/topHeader.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		getActivitiesApi,
		getRankApi
	} from '@/api/activity.js'
	export default {
		components: {
			topHeader,
			shareAnother
		},
		computed: {
			...mapGetters(['userInfo']),
			pageName() {
				return this.showTitle ? '红包狂发，人人有份' : ''
			}
		},
		data() {
			return {
				activityList: [],
				rankList: [],
				isShareShow: false,
				scrollTop: 30,
				showTitle: true
			}
		},
		mounted() {
			this.getActivities()
			this.getRank()
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage: function(res) {
			return {
				imageUrl: 'https://julimeng-prod.oss-cn-hangzhou.aliyuncs.com/managehub/MP/activity/invite.png',
				title: '注册领现金红包',
				path: `/pages/index/index?activityUserId=${this.userInfo.id}`
			}
		},
		// #endif
		onPageScroll: function({
			scrollTop
		}) {
			if (scrollTop >= this.scrollTop && this.showTitle) {
				this.showTitle = false
			} else if (scrollTop < this.scrollTop && !this.showTitle) {
				this.showTitle = true
			}
		},
		methods: {
			async getActivities() {
				const res = await getActivitiesApi()
				this.activityList = res?.data?.list || []
			},
			async getRank() {
				const res = await getRankApi(5)
				this.rankList = (res?.data || [])?.map(item => {
					const originPhone = item.phone || ''
					const phone = originPhone.slice(0, 3) + '****' + originPhone.slice(7)
					return {
						...item,
						phone,
						fPrice: (item.price / 100).toFixed(2)
					}
				})
			},
			handleActivity({
				type
			}) {
				// #ifdef H5
				if (type === 'brokerage') {
					this.isShareShow = true
					this.$nextTick(() => {
						this.$refs.another.open({
							imgbgBase64: redBase64Bg,
							type: 'activity'
						})
					})
				}
				// #endif
				if (type !== 'brokerage') {
					uni.navigateTo({
						url: `/pagesWater/taxSearch/index`
					})
				}
			},
			goProfit() {
				uni.navigateTo({
					url: '/pagesUser/activity/profit'
				})
			},
			goRule() {
				const rule = this.activityList?.[0].description
				uni.setStorageSync('ActivityRule', rule)
				uni.navigateTo({
					url: '/pagesUser/activity/rule'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.activity {

		padding-bottom: -320rpx;
		background-color: #FEEBCA;

		.img {
			width: 750rpx;
			height: 1400rpx;
		}

		.main {
			margin-top: -320rpx;
			position: relative;
			z-index: 2;
			padding-bottom: 30rpx;

		}

		.links {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.link {
			height: 70rpx;
			line-height: 70rpx;
			font-size: 30rpx;
			color: #fff;
			font-weight: 500;
			background: linear-gradient(to top, #FF5E41, #FFA5B5);

			&:first-child {
				padding-left: 10rpx;
				padding-right: 30rpx;
				border-radius: 0 30rpx 30rpx 0;
			}

			&:last-child {
				padding-right: 10rpx;
				padding-left: 30rpx;
				border-radius: 30rpx 0 0 30rpx;
			}
		}

		.box {
			margin: 26rpx;
			border: 8rpx solid #FFDEC6;
			border-radius: 30rpx;

			&.list {
				padding: 0 16rpx 30rpx;
				background-color: #fff;

				image {
					width: 100%;
					height: 232rpx;
				}

				.item {
					margin-top: 30rpx;
					height: fit-content;
					background: none;
					padding: 0;
					border: none;
					line-height: 0;
				}
			}

			&.rank {
				background-color: #FFF6DD;
				margin-top: 42rpx;
				min-height: 500rpx;

				.box-title {

					font-size: 34rpx;
					height: 100rpx;
					text-align: center;
					color: #830D06;
					font-weight: bold;
					background-image: url('https://julimeng-prod.oss-cn-hangzhou.aliyuncs.com/managehub/MP/activity/record-bg.png');
					background-size: 417rpx 71rpx;
					background-repeat: no-repeat;
					background-position: 132.5rpx 0;
					position: relative;
					z-index: 3;
					margin-top: -16rpx;
					padding-top: 10rpx;

				}

				.item {
					display: flex;
					justify-content: space-between;
					color: #BE5E10;
					font-size: 30rpx;
					padding: 24rpx 60rpx;
					line-height: 42rpx;
				}
			}
		}


	}
</style>